<template>
    <fieldset>
        <legend>缓存组件</legend>
        <button :class="{active:item===dynamic}" v-for="(item,i) in tabs" :key="i" @click="dynamic=item">{{item}}</button>
        <keep-alive :include="['tab1','tab2']">
            <h1 :is="dynamic"></h1>
        </keep-alive>
    </fieldset>
</template>
<style>
    .active{
        background: skyblue;
    }
</style>
<script>
    //keep-Alive用来包裹动态组件，缓存组件状态，避免组件重复渲染带来的性能问题
    //include：包含 写在include中的组件名，将会被缓存
    //exclude：不包含 写在exclude中的组件名将会被排除

    //钩子函数
    // activated 组件被激活的时候调用
    // deactivated 组件被缓存的时候调用
    import tab1 from './tab1';
    import tab2 from './tab2';
    import tab3 from './tab3';

    export default {
        data() {
            return {
                dynamic:"tab1",
                tabs:["tab1","tab2","tab3"]
            }
        },
        components:{
            tab1,
            tab2,
            tab3
        }
    }
</script>